<template>
  <div>
    <mt-header
      class="tb"
      title="用户注册"
      style="background-color: #f0acac; font-size: 16px"
    >
      <mt-button slot="left"> <router-link to="/"></router-link> </mt-button>
      <router-link to="login" slot="right">登录</router-link>
    </mt-header>

    <mt-field
      class="name"
      type="text"
      placeholder="请输入手机号"
      label="手机号:"
      v-model="name"
      :state="nameState"
      @blur.native.capture="checkName"
    ></mt-field>
    <mt-field
      class="name1"
      type="password"
      placeholder="请输入密码"
      label="密码:"
      v-model="pwd"
      :state="pwdState"
      @blur.native.capture="checkPwd"
    ></mt-field>
    <mt-field
      class="name2"
      type="password"
      placeholder="请再次输入密码"
      label="确认密码:"
      v-model="upwd"
      :state="upwdState"
      @blur.native.capture="checkUpwd"
    ></mt-field>
    <el-checkbox class="fx" v-model="checked"
      >已阅读并同意味多美平台协议</el-checkbox
    >
    <br /><br /><br />
    <mt-button
      class="zc"
      type="primary"
      size="large"
      @click="checkForm"
      style="background-color: #f0acac"
      >免费注册</mt-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      name: "",
      nameState: "",
      pwd: "",
      pwdState: "",
      upwd: "",
      upwdState: "",
    };
  },
  methods: {
    checkForm() {
      this.checkName(); //调用验证用户名的验证函数
      this.checkPwd();
      this.checkUpwd();
      if (
        this.nameState == "success" &&
        this.pwdState == "success" &&
        this.upwdState == "success"
      ) {
        console.log("开始注册");
        // 发送axios请求 ,执行注册业务 post请求
        let uname = this.name;
        let upwd = this.pwd;
        this.axios
          .post("/register", `username=${uname}&password=${upwd}`)
          .then((res) => {
            console.log(res);
            // 对响应结果进行判断
            if (res.data.code == 200) {
              this.$toast({
                message: "注册成功",
                duration: 3000,
                position: "buttom",
              });
              this.$router.push("/login");
            } else {
              this.$messagebox("提示", "该用户已存在");
            }
          });
      }
    },

    checkName() {
      // 验证表单
      let reg = /^\w{6,15}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
      } else {
        this.nameState = "error";
      }
    },
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
      } else {
        this.pwdState = "error";
      }
    },
    checkUpwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.upwd)) {
        this.upwdState = "success";
      } else {
        this.upwdState = "error";
      }
    },
  },
};
</script>

<style scoped>
.fx {
  margin-top: 10%;
  margin-left: 25%;
}
.tb {
  margin-bottom: 30%;
}
.name {
  border-bottom: 2px solid pink;
  width: 350px;
  margin: 0 auto;
}
.name1 {
  border-bottom: 2px solid pink;
  width: 350px;
  margin: 0 auto;
}
.name2 {
  border-bottom: 2px solid pink;
  width: 350px;
  margin: 0 auto;
}
.zc {
  width: 350px;
  margin: 0 auto;
  background-color: pink;
}
</style>
